import * as React from 'react';
import {
  ReactWidget,
} from '@theia/core/lib/browser';
import { injectable, postConstruct } from '@theia/core/shared/inversify';

@injectable()
export class InstanceWidget extends ReactWidget {
  /** The ID of the view */
  static readonly ID = 'ecs-instance-widget:view';
  /** The label of the view */
  static readonly LABEL = 'ECS Instance Widget';

    instanceId: string;
    name: string;

    constructor(id: string, name: string) {
      super();

      this.instanceId = id;
      this.name = name;
    }

    @postConstruct()
    protected init(): void {
      this.id = `instance-widget@${this.instanceId}`;
      this.title.label = `实例：${this.instanceId}`;
      this.title.caption = this.name;
      this.title.closable = true;
      this.title.iconClass = 'fa fa-pencil';

      this.update();
    }

    render(): React.ReactNode {
      console.log('22222222222=====');
        return (
            <div
              style={{
                border: '1px solid red',
                padding: '24px'
              }}
            >
                <h2>实例详情</h2>
                <div>实例名称： {this.name}</div>
            </div>
        );
    }
}